<template>
  <el-dialog
    title="工作经历"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    width="900px"
  >
    <div class="link j_a_box">
      <div
        v-for="(item, i) in socialLinks"
        :key="i"
        class="link-box flexbox"
        @click="index = i"
      >
        <h3>{{ item.linkName }}</h3>
        <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          style="margin: 20px; float: left"
          :http-request="uploadImage"
        >

          <img v-if="item.linkImg" :src="imgHost + item.linkImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" style="" />
        </el-upload>
        <div class="flexbox">
          <el-input v-model="item.onlinelink" placeholder="请输入链接" />
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSocialLinks">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { upload } from '@/fs'
import { updateSocialLinks } from '@/api/resume'
import { Indicator } from 'mint-ui'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      index: null,
      // 技能列表
      socialLinks: [
        {
          linkName: 'QQ',
          linkImg: '',
          onlinelink: '',
          userId: 1
        },
        {
          linkName: '微信',
          linkImg: '',
          onlinelink: '',
          userId: 1
        },
        {
          linkName: 'github',
          linkImg: '',
          onlinelink: '',
          userId: 1
        },
        {
          linkName: '微博',
          linkImg: '',
          onlinelink: '',
          userId: 1
        }
      ]
    }
  },
  watch: {
    form: {
      handler(val) {
        if (val.length > 0) {
          this.socialLinks = this.socialLinks.map((item) => {
            const data = val.find((data) => {
              if (data.linkName) {
                return data.linkName === item.linkName
              }
              return item
            })
            item = data
            return item
          })
        }
      },
      deep: true
    }
  },
  created() {},
  methods: {
    handleSocialLinks() {
      Indicator.open('正在编辑中，请稍后。。。')
      updateSocialLinks(this.socialLinks).then((res) => {
        Indicator.close()
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.$emit('handlQuery')
      })
    },
    handleClose() {
      console.log(2)
      this.$emit('handleClose')
    },
    uploadImage({ file }) {
      upload(file).then((res) => {
        this.socialLinks[this.index].linkImg = res.code
      })
    }
  }
}
</script>

<style scoped lang="less">
.link-box {
  text-align: center;
  flex-direction: column;
  align-items: center;
  h3 {
    margin: 0;
  }
  .avatar {
    width: 120px;
    height: 120px;
  }
  .avatar-uploader-icon {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
}
</style>
